<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .rect {
      fill: red
    }
  </style>
</head>

<body>

  <svg width="500" height="500" style="background: #efefef;">
    <!-- <rect x="50" y="100" width="100" height="50" class="rect" stroke="blue" stroke-width="5" ></rect>

    <ellipse cx="300" cy="300" rx="50" ry="100"
    style="fill: orange; stroke: orangered; stroke-width: 5px;"
    ></ellipse>

    <circle cx="200" cy="200" r="100"
    style="fill: orange; stroke: orangered; stroke-width: 5px;"
    ></circle>

    <line x1="50" y1="50" x2="450" y2="450" stroke="red" stroke-width="3"></line>
    -->
    <!-- <polygon points="50,20 150,60 120,200 100,200 "  fill="none" stroke="blue" stroke-width="5"></polygon>  -->

    <!-- <polyline points="50,20 150,60 120,200 100,200" fill="none"  stroke="blue" stroke-width="5"></polyline> -->

    <!-- <path d="M30,30 L200,200  L230,260 " fill="none" stroke="green"></path>

    <text x="200"  y="200" style="font-size: 50;fill:none; stroke-width: 1; stroke:red;"> hello world </text> -->

    <defs>
      <g id="mycircle" stroke="green" fill="none" stroke-width="5">
        <circle cx="25" cy="30" r="15" />
        <circle cx="55" cy="80" r="15" />
        <circle cx="85" cy="50" r="15">
          <animate attributeName="cx" from="85" to="200" dur="5s" repeatCount="5" />
          <animate attributeName="cy" from="50" to="100" dur="5s" repeatCount="5" />
        </circle>
      </g>
    </defs>


    <use xlink:href="#mycircle" x="30" y="30" />

    <use xlink:href="#mycircle" x="130" y="130" />

    <!-- 
    <clipPath id="myclipPath">
      <rect x="200" y="200" width="200" height="100" />
    </clipPath>

    <circle cx="260" cy="300" clip-path="url(#myclipPath)" r="100" /> -->





  </svg>
</body>

</html>